<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ include file="/common/include/taglib.jsp"%>
<%@ include file="/common/include/header2.jsp"%>
<html >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Insert title here</title>
	<G4Studio:import src="/resource/handsontable/handsontable.full.min.js" />
	<G4Studio:import src="/resource/handsontable/handsontable.full.min.css" />

	<G4Studio:import src="/resource/My97DatePicker/WdatePicker.js"/>
	<h1>在线excel例子</h1>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">月报</a></li>
			<li><a href="#tabs-2">合同</a></li>
			<li><a href="#tabs-3">收款情况</a></li>
		</ul>
		<div id="tabs-1">
			<div style="margin-bottom:5px;">
				<table style="font-size:12px;">
					<tr>
						<td>年份:</td>
						<td><input style="height:22px;border:1px solid #b5b8c8;width:150px;" id="monthTxt" name="month" onclick="WdatePicker({dateFmt:'yyyy'});" /></td>
						<td><button onclick="queryMonths()" style="height:22px;">查询</button></td>
					</tr>
				</table>
			</div>
			<div id="hot"></div>
		</div>
		<div id="tabs-2">
			<div style="margin-bottom:5px;">
				<table style="font-size:12px;">
					<tr>
						<td>年份:</td>
						<td><input style="height:22px;border:1px solid #b5b8c8;width:150px;" id="compactTxt" name="compact" onclick="WdatePicker({dateFmt:'yyyy'});" /></td>
						<td><button onclick="queryCompact()" style="height:22px;">查询</button></td>
					</tr>
				</table>
			</div>
			<div id="contract"></div>
		</div>
		<div id="tabs-3">
			<div style="margin-bottom:5px;">
				<table style="font-size:12px;">
					<tr>
						<td>年份:</td>
						<td><input style="height:22px;border:1px solid #b5b8c8;width:150px;" id="collectTxt" name="collect" onclick="WdatePicker({dateFmt:'yyyy'});" /></td>
						<td><button onclick="queryCollects()" style="height:22px;">查询</button></td>
					</tr>
				</table>
			</div>
			<div id="collect"></div>
		</div>
	</div>

	<h3>1、静态数组单元格</h3>
	<div id="staticJsArray"></div>


	<h3>2、合并单元格(静态)</h3>
	<div id="mergeCells"></div>


	<h3>3、头分组(静态)</h3>
	<div id="headerGroupings"></div>
	<script>
		$(document).ready( function (){

			$('#tabs2, #tabs, #tabs3').tabs();

			// 月报
			$("#hot").handsontable({
				//startRows : 40,
				//startCols : 40,
				//rowHeaders : false,
				//colHeaders : true,

				minSpareRows: 1,
				colHeaders: false,
				rowHeaders: true,
				minSpareCols : 1,
				minSpareRows : 1,
				colHeaders : ['企业名称', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				columns : [
					{data : 'customer'},
					{data : 'January'},//1月
					{data : 'February'},//2月
					{data : 'March'},//3月
					{data : 'April'},//4月
					{data : 'May'},//5月
					{data : 'June'},//6月
					{data : 'July'},//7月
					{data : 'August'},//8月
					{data : 'September'},//9月
					{data : 'October'},//10月
					{data : 'November'},//11月
					{data : 'December'}//12月
				]
			});

			// 合同
			$("#contract").handsontable({
				//startRows : 40,
				//startCols : 40,
				//rowHeaders : false,
				//colHeaders : true,

				minSpareRows: 1,
				colHeaders: false,
				rowHeaders: true,
				minSpareCols : 1,
				minSpareRows : 1,
				colHeaders : ['企业名称','合同开始时间', '合同结束时间', '签订日期', '每月费用'],
				columns : [
					{data : 'customer'},
					{data : 'startdate'},
					{data : 'enddate'},
					{data : 'signdate'},
					{data : 'monthfee'}
				]
			});

			// 收款情况
			$("#collect").handsontable({
				//startRows : 40,
				//startCols : 40,
				//rowHeaders : false,
				//colHeaders : true,

				minSpareRows: 1,
				colHeaders: false,
				rowHeaders: true,
				minSpareCols : 1,
				minSpareRows : 1,
				colHeaders : ['企业名称', '项目', '年份', '已收款', '代收款', '服务费', '应待收款', '收款人', '收款日期', '代支人', '代支日期'],
				columns : [
					{data : 'customer'},
					{data : 'project'},
					{data : 'yearmonth'},
					{data : 'collectget'},
					{data : 'collectreplace'},
					{data : 'servicefee'},
					{data : 'collectfee'},
					{data : 'collectperson'},
					{data : 'collectdate'},
					{data : 'personpay'},
					{data : 'datepay'}
				]
			});
			//queryMonths();
			//queryCompact();
			//queryCollects();
			//静态数组例子
			staticJsArray();
			//合并单元格
			mergeCells();
			//表头分组
			// http://jsfiddle.net/rfalves/7qvqzosa/4/
			headerGroupings();
		});

		// 查询月报统计
		function queryMonths(){
			var month = $('#monthTxt').val();
			if(month != ''){
				$.post('../daizhang/reportmonth.do?reqCode=tongji',{
					'loginuserid':parent.userid,
					'tongji' : true,
					'monthtongji' : month
				},function(result){
					var items = eval('(' + result + ')');
					$('#hot').handsontable('loadData', items.data);
				});
			}else{
				alert('请选择年份');
			}
		}
		// 查询合同
		function queryCompact(){
			var compact = $('#compactTxt').val();
			if(compact != ''){
				$.post('../daizhang/compact.do?reqCode=tongji',{
					'loginuserid' : parent.userid,
					'tongji' : true,
					'compacttongji' : compact
				},function(result){
					var items = eval('(' + result + ')');
					$('#contract').handsontable('loadData', items.data);
				});
			}else{
				alert('请选择年份');
			}
		}
		//查询收款情况统计
		function queryCollects(){
			var collect = $('#collectTxt').val();
			if(collect != ''){
				$.post('../daizhang/collect.do?reqCode=tongji',{
					'loginuserid':parent.userid,
					'tongji' : true,
					'collecttongji' : collect,
				},function(result){
					var items = eval('(' + result + ')');
					$('#collect').handsontable('loadData', items.data);
				});
			}else{
				alert('请选择年份');
			}
		}
		/**
		 var data = [
		 ["苹果科技", 1001, 2001, 3012, 40,13, 1001, 2001, 3012, 40,13,14,15],
		 ["特斯拉", 20, 11, 14, 13, 20, 11, 14, 13, 20, 11, 14, 13],
		 ["SpaceX", 30, 15, 12, 13, 20, 11, 14, 13, 20, 11, 14, 13]
		 ];

		 var dataContract = [
		 ["Google", "1", "2", "3", "4"],
		 ["苹果科技", 1001, 2001, 3012, 40,13],
		 ["特斯拉", 20, 11, 14, 13],
		 ["SpaceX", 30, 15, 12, 13]
		 ];

		 var container = document.getElementById('hot');
		 var hot = new Handsontable(container,
		 {
            data: data,
            minSpareRows: 1,
            colHeaders: false,
            rowHeaders: true,
            colHeaders: ["企业名称", "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            contextMenu: true
        });

		 var containerContract = document.getElementById('contract');
		 var contract = new Handsontable(containerContract,
		 {
            data: dataContract,
            minSpareRows: 1,
            colHeaders: false,
            rowHeaders: true,
            colHeaders: ["企业名称","合同开始时间", "合同结束时间", "签订日期", "每月费用"],
            contextMenu: true
        });
		 */

		/**
		 * 合并单元格
		 * @constructor
		 */
		function staticJsArray(){
			var data = [
				["苹果科技", 1001, 2001, 3012, 40,13, 1001, 2001, 3012, 40,13,14,15],
				["特斯拉", 20, 11, 14, 13, 20, 11, 14, 13, 20, 11, 14, 13],
				["SpaceX", 30, 15, 12, 13, 20, 11, 14, 13, 20, 11, 14, 13]
			];
			var dataContract = [
				["Google", "1", "2", "3", "4"],
				["苹果科技", 1001, 2001, 3012, 40,13],
				["特斯拉", 20, 11, 14, 13],
				["SpaceX", 30, 15, 12, 13]
			];
			var container = document.getElementById('staticJsArray');
			var hot = new Handsontable(container,
					{
						data: data,
						minSpareRows: 1,
						colHeaders: false,
						rowHeaders: true,
						colHeaders: ["企业名称", "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
						contextMenu: true
					});
			var containerContract = document.getElementById('contract');
			var contract = new Handsontable(containerContract,
					{
						data: dataContract,
						minSpareRows: 1,
						colHeaders: false,
						rowHeaders: true,
						colHeaders: ["企业名称","合同开始时间", "合同结束时间", "签订日期", "每月费用"],
						contextMenu: true
					});
		}

		function mergeCells(){
			var container = document.getElementById('mergeCells'),
					hot;

			var data = [
				["苹果科技", 1000,1001, 2001, 3012, 40,13, 1001, 2001, 3012, 40,13,14,15],
				["特斯拉", 2000,20, 11, 14, 13, 20, 11, 14, 13, 20, 11, 14, 13],
				["SpaceX", 3000,30, 15, 12, 13, 20, 11, 14, 13, 20, 11, 14, 13]
			];

			var hot = new Handsontable(container,
					{
						data: data,
						minSpareRows: 1,
						colHeaders: false,
						rowHeaders: true,
						colHeaders: ["企业名称", "一月","一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
						contextMenu: true,
						mergeCells: [
							{row: 0, col: 1, rowspan: 1, colspan: 2},
							{row: 1, col: 1, rowspan: 1, colspan: 2}
						]
					});

//		hot = new Handsontable(container, {
//			data: Handsontable.helper.createSpreadsheetData(1000, 16),
//			colWidths: [55, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47], // can also be a number or a function
//			rowHeaders: true,
//			colHeaders: true,
//			contextMenu: true,
//			mergeCells: [
//				{row: 1, col: 1, rowspan: 3, colspan: 3},
//				{row: 3, col: 4, rowspan: 2, colspan: 2}
//			]
//		});
		}

		/**
		 * 表头分组
		 */
		function headerGroupings(){
			// Quick and dirty model for name and address.
			function model(qymc,dsJan, gsJan, zzsJan, dsFeb, gsFeb, zzsFeb) {
				return {
					qymc:{qymc:qymc},
					jan: { dsJan: dsJan, gsJan: gsJan,zzsJan:zzsJan },
					feb: { dsFeb: dsFeb, gsFeb: gsFeb,zzsFeb:zzsFeb }
				};
			}

			var $container = $("#headerGroupings");
			$container.handsontable({
				data: [
					model('苹果科技',1001, 2001, 3012, 40,13, 1001),
					model('特斯拉',2001, 2002, 3012, 40,13, 1001),
					model('SpaceX',3001, 3003, 3012, 40,13, 1001),
					model('趋势科技',4001, 4004, 3012, 40,13, 1001)
				],
				dataSchema: model,
				startRows: 4,
				startCols: 5,
				colHeaders: ['企业名称','地税', '国税', '增值税', '地税', '国税','增值税'],
				rowaHeaders: false,
				manualColumnResize: true,
				columns: [
					{data: 'qymc.qymc'},
					{data: 'jan.dsJan'},
					{data: 'jan.gsJan'},
					{data: 'jan.zzsJan'},
					{data: 'feb.dsFeb'},
					{data: 'feb.gsFeb'},
					{data: 'feb.zzsFeb'}
				],
				afterRender: function () {
					$container.find('thead').find('tr').before(
							'<tr id="header-grouping"><th colspan="1"></th><th colspan="3">一月</th>' +
							'<th colspan="3">二月</th></tr>');
				},
				beforeRender: function() {
					while ($('#header-grouping').size() > 0)
						$('#header-grouping').remove();
				},
				afterColumnResize: function () {
					$container.handsontable('render');
				},
				afterGetColHeader: function() {
					while ($('.ht_clone_top.handsontable #header-grouping th').size() > 0)
						$('.ht_clone_top.handsontable #header-grouping th').remove();
				}
			});
		}
	</script>
</html>